<template>
	<el-select v-model="selected" v-bind="$attrs">
		<el-option v-for="(item, index) in selectOptions" :key="index" :label="item.label" :value="item.value"></el-option>
	</el-select>
</template>

<script>
export default {
	name: 'swSelect',
	props: {
		value: String,
		data: {
			type: Array,
			default: () => {}
		},
		prop: {
			type: Object,
			default() {
				return {
					label: 'label',
					value: 'value'
				};
			}
		}
	},
	data() {
		return {
			selected: this.value
		};
	},
	computed: {
		selectOptions() {
			return this.data.map((item) => {
				return { label: item[this.prop.label], value: item[this.prop.value] };
			});
		}
	},
	watch: {
		value(val) {
			this.selected = val;
		},
		selected(val) {
			this.$emit('input', val);
		}
	}
};
</script>

<style scoped></style>
